<template>
    <el-drawer :visible.sync="dictDetailvisible" close-on-press-escape direction="btt" size="70%">
        <div class="table-header">
            <div>
                <el-button type="primary" icon="el-icon-circle-plus-outline" size="small"
                    @click="addOrUpdate(dataForm.pkType,0)">添加字典
                </el-button>
                <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
                <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
            </div>
            <div>
                <el-button size="small" round icon="el-icon-refresh" @click="getDataTable(dataForm.pkType)"></el-button>
                <el-button size="small" round icon="el-icon-share"></el-button>
                <el-button size="small" round icon="el-icon-search" @click="changeHeader()"></el-button>
            </div>
        </div>

        <el-table :data="tabledata" size="small" style="width: 100%" empty-text="暂无日志信息" border highlight-current-row
            :header-cell-style="{'background':'#fcfcfc','text-align':'center'}">
            <el-table-column prop="dictType" header-align="center" align="center" label="字典分类">
            </el-table-column>
            <el-table-column prop="dictValue" header-align="center" align="center" label="字典值">
            </el-table-column>
            <el-table-column prop="dictDesc" header-align="center" align="center" label="字典描述">
            </el-table-column>
            <el-table-column prop="valueNote" header-align="center" align="center" label="字典备注">
            </el-table-column>
            <el-table-column prop="createdTime" header-align="center" align="center" label="创建时间">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="addOrUpdate(dataForm.dictType,scope.row.pkValue)"><i
                            class="el-icon-edit"></i>编辑</el-button>
                    <el-button type="text" size="small" @click="delDictValue(scope.row.pkValue)"><i
                            class="el-icon-delete"></i>删除
                    </el-button>
                    <!-- <el-button type="text" size="small" @click="showDictDetails(scope.row.pkValue)"><i
                            class="el-icon-menu"></i>字典项</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <ec-pagination :page="page" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </ec-pagination>

        <add-dict-value v-if="addDictValueVisible" ref="addDictValue" @refreshDataList="getDataTable(dataForm.pkType)">
        </add-dict-value>
    </el-drawer>
</template>

<script>
    import * as dictService from '@/api/bdms/dict'
    import addDictValue from './addDictValue'
    export default {
        data() {
            return {
                activeName: 'first',
                dictDetailvisible: false,
                addDictValueVisible: false,
                tabledata: [],
                dataForm: {
                    pkType: 0
                },
                page: {
                    page: 1,
                    limit: 10,
                    total: 0
                },
            }
        },
        components: {
            addDictValue
        },
        methods: {
            init(pkType) {
                this.dataForm.pkType = pkType || 0
                this.$nextTick(() => {
                    if (this.dataForm.pkType) {
                        this.getDataTable();
                    }
                })
            },
            getDataTable() {
                this.dictDetailvisible = true
                let query = {
                    page: this.page.page,
                    limit: this.page.limit,
                    pkType: this.dataForm.pkType
                };
                dictService.getChildren(query).then(data => {
                    this.tabledata = data.list;
                    this.page.total = data.totalCount;
                    this.areaLoading = false;
                });
            },
            addOrUpdate(pktype, id) {
                this.dictDetailvisible = false;
                this.addDictValueVisible = true;
                this.$nextTick(() => {
                    this.$refs.addDictValue.init(pktype, id)
                })
            },
            delDictValue(id) {
                if (id) {
                    this.$confirm("确认删除？", "确认信息", {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "删除",
                        cancelButtonText: "取消"
                    }).then(() => {
                        dictService.delDictValue(id).then(() => {
                            this.getDataTable();
                        });
                    });
                }

            },
            // 切换页签
            trigger(tab, event) {},
            // 表单提交
            dataFormSubmit() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        var params = {
                            'pkValue': this.dataForm.pkValue || undefined,
                            'pkType': this.dataForm.pkType,
                            'dictValue': this.dataForm.dictValue,
                            'dictTag': this.dataForm.dictTag,
                            'dictDesc': this.dataForm.dictDesc,
                            'valueNote': this.dataForm.valueNote,
                            'valueSort': this.dataForm.valueSort,
                            'revision': this.dataForm.revision,
                            'createdBy': this.dataForm.createdBy,
                            'createdTime': this.dataForm.createdTime,
                            'updatedBy': this.dataForm.updatedBy,
                            'updatedTime': this.dataForm.updatedTime
                        }
                        var tick = !this.dataForm.pkValue ? API.dictvalue.add(params) : API.dictvalue.update(
                            params)
                        tick.then(({
                            data
                        }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.dictDetailvisible = false
                                        this.$emit('refreshDataList')
                                    }
                                })
                            } else {
                                this.$message.error(data.msg)
                            }
                        })
                    }
                })
            },
            //分页查询
            handleSizeChange(val) {
                this.page.limit = val;
                this.getDataTable();
            },
            handleCurrentChange(val) {
                this.page.page = val;
                this.getDataTable();
            },
        }
    }
</script>